<template>
  <div class="notice-editor-wrapper">
    <div class="ql-editor-content">
      <div class="preview-new-box">
        <div class="notice-content">
          <div class="notice-company-title">{{ noticeTitle }}</div>
          <div class="notice-company-date">发布时间：{{ noticeTime }}</div>
          <div class="notice-company-content" v-html="noticeContentHasStyle" />
          <div class="mt24">
            附件：
            <div v-for="(item, index) in noticeFileList" :key="index">{{ item.name }}(点击下载)</div>
          </div>
        </div>
      </div>
    </div>
    <div class="btnline">
      <a-button type="text" @click="backStep">上一步</a-button>
      <a-button type="primary" @click="NextStep">确认发布</a-button>
    </div>
    <!-- 发布公告 -->
    <a-modal
      title="发布公告"
      :visible="publishVisible"
      class="publish-wrap"
      width="468px"
      @ok="confirmPublish"
      @cancel="publishVisible = false"
    >
      <p class="publish-title">确定发布此新闻吗？</p>
    </a-modal>
  </div>
</template>
<script>
// import moment from 'moment';
import { formatDateAll } from "@/utils/index";
import { addNewsInfos, updateNewsInfos } from "@/api/company/news";
export default {
  name: "Preview",
  filters: {
    formatDateAll
  },
  props: {
    noticeTitle: {
      type: String,
      default: ""
    },
    noticeFileList: {
      type: Array,
      default: () => []
    },
    noticeContent: {
      type: String,
      default: ""
    },
    noticeContentHasStyle: {
      type: String,
      default: ""
    },
    groupCode: {
      type: String,
      default: ""
    },
    noticeTime: {
      type: String,
      default: ""
    },
    newsTypeId: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      name: "",
      publishVisible: false,
      isTop: true,
      informEmployee: true,
      isPublishNow: "",
      publishDate: "",
      companyId: ""
    };
  },

  created() {
    this.companyId = this.$store.state.hr.companyId;
  },
  methods: {
    backStep() {
      this.$emit("current", 1);
    },
    NextStep() {
      // 确认发布
      this.publishVisible = true;
    },
    confirmPublish() {
      var newsTypeAddDTO = {
        name: this.noticeTitle,
        pushDate: this.noticeTime,
        newsGroupCode: this.groupCode,
        newsFileAddDTOList: this.noticeFileList,
        newsInfoAddDTO: {
          title: this.noticeTitle,
          content: this.noticeContent,
          isPush: false,
          contentHasStyle: this.noticeContentHasStyle,
          publishDate: this.publishDate
        }
      };
      this.noticeFileList.forEach((item, index) => {
        item.sort = index;
      });
      if (this.newsTypeId) {
        var newsTypeUpdateDTO = {
          pushDate: this.noticeTime,
          id: this.newsTypeId,
          title: this.noticeTitle,
          newsFileUpdateDTOList: this.noticeFileList,
          content: this.noticeContent,
          contentHasStyle: this.noticeContentHasStyle
        };
        updateNewsInfos(newsTypeUpdateDTO).then(res => {
          this.publishVisible = false;
          this.$message.success("发布成功");
          this.$router.push({
            path: "/news/manage"
          });
        });
      } else {
        addNewsInfos(newsTypeAddDTO).then(res => {
          this.publishVisible = false;
          this.$message.success("发布成功");
          this.$router.push({
            path: "/news/manage"
          });
        });
      }
    },
    handleChange(value, dateString) {
      this.isPublishNow = false;
      this.publishDate = dateString;
    }
  }
};
</script>
<style lang="scss">
.topset {
  display: flex;
  align-items: center;
}
.notice-editor-wrapper {
  .preview-new-box {
    width: 99%;
    height: 600px;
    overflow: auto;
    .notice-company-title {
      text-align: center;
      font-size: 24px;
      font-weight: 400;
      color: rgba(64, 64, 64, 1);
    }
    .notice-company-date {
      display: block;
      margin: 0 auto;
      width: 600px;
      text-align: center;
      font-size: 14px;
      color: rgba(102, 102, 102, 1);
    }
  }
}
</style>
